import { useRoutes, Navigate } from "react-router-dom";
import { lazy } from "react";

import SocketIndex from "../pages/socket/index";
import RouteConfig from "./config";

const Home = lazy(() => import("../pages/home"));
const Test = lazy(() => import("../pages/testPage"));

const HomeMain = lazy(() => import("../pages/home/main"));
const FileUpload = lazy(() => import("../pages/home/fileUpload"));
const TimeLine = lazy(() => import("@/pages/home/timeline"));

// function LazyElement({ routeElement }) {
//   const LazyComponent = lazy(routeElement);
//   return <LazyComponent />;
// }

// function wrapRoutesWithLazy(route) {
//   return route.map((item, index) => {
//     const tempItem = Object.assign({}, item);
//     tempItem.element = <LazyElement routeElement={item.element} />;
//     if (item.children) {
//       tempItem.children = wrapRoutesWithLazy(item.children);
//     }
//     return tempItem;
//   });
// }

// const RouteList = wrapRoutesWithLazy(RouteConfig);

export default function () {
  // return useRoutes(RouteList);
  return useRoutes([
    {
      path: "/",
      element: <Navigate to={"/home"}></Navigate>,
    },
    {
      path: "/home",
      element: <Home></Home>,
      children: [
        {
          path: "index",
          element: <HomeMain></HomeMain>,
        },
        {
          path: "fileUpload",
          element: <FileUpload></FileUpload>,
        },
        {
          path: "timeline",
          element: <TimeLine></TimeLine>,
        },
      ],
    },
    {
      path: "/socket",
      element: <SocketIndex></SocketIndex>,
      children: [],
    },
    {
      path: "/test",
      element: <Test></Test>,
    },
  ]);
}
